
<template>
	<!-- 通过 $emit 触发一个名为 scrolltolower 的自定义事件。 -->
	<scroll-view
	  :refresherEnabled="scrollPageProps.refresherEnabled"
	  :refresherTriggered="scrollPageProps.refresherTriggered" 
	  @refresherrefresh="$emit('refresherrefresh', $event)"
	  @scrolltolower="$emit('scrolltolower', $event)"
	  scroll-y
	  :style="{
	    height: windowHeight + 'px',
	    borderBottom: scrollPageProps.borderStyle,
	    boxSizing: 'border-box',
		backgroundColor: scrollPageProps.backgroundColor
	  }"
	>
	  <view class="scroll-page-content">
	    <slot></slot>
	  </view>
	</scroll-view>
</template>

<script setup>
	// 自定义事件
	defineEmits(['scrolltolower', 'refresherrefresh'])
	
	// 读取页面视口的高度
	const { windowHeight } = uni.getSystemInfoSync()
	
	// function test() {
	//    console.log('快到底了...')
	// }


	// 自定义组件属性
	const scrollPageProps = defineProps({
	  borderStyle: {
	    type: [String, Boolean],
	    default: false,
	  },
	  refresherEnabled: {
	    type: Boolean,
	    default: false,
	  },
	  refresherTriggered: {
	    type: Boolean,
	    default: false,
	  },
	  backgroundColor: {
		type: String,
		default: '#fff',
	  }
	});

</script>


<style lang="scss">
	.scroll-page-content {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
